<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>商品分类</el-breadcrumb-item>
    </el-breadcrumb>

    <div>
      <el-button type="success" plain @click="showAddDialog(),dialogVisible=true">添加分类</el-button>
      <tree-grid :treeStructure="true" :columns="columns" :data-source="dataSource" @deleteCate="deleteCategory" @editCate="editCategory">
      </tree-grid>
    </div>
    <div class="tc">
      <el-dialog title="提示" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
        <el-form :model="addform" label-width="80px">
          <el-form-item label="分类名称">
            <el-input auto-complete="off" v-model="addform.cat_name"></el-input>
          </el-form-item>
          <el-form-item label="父级名称">
            <el-cascader :options="catelist" :props='cascaderProps' v-model="selectedOptions" @change="handleChange">
            </el-cascader>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="addCategories()">确 定</el-button>
        </span>
      </el-dialog>

    </div>
  </div>
</template>


<script>
import { getCategories, addcate } from "../../api/index.js";
import TreeGrid from "../../components/TreeGrid/TreeGrid";
export default {
  data() {
    return {
      dataSource: [],
      columns: [
        {
          text: "分类名称",
          dataIndex: "cat_name",
          width: ""
        },
        {
          text: "是否有效",
          dataIndex: "cat_deleted",
          width: ""
        },
        {
          text: "排序",
          dataIndex: "cat_level",
          width: ""
        }
      ],
      dialogVisible: false,
      addform: {
        cat_pid: "",
        cat_name: "",
        cat_level: ""
      },
      selectedOptions: [],
      catelist: [],
      cascaderProps: {
        label: "cat_name",
        children: "children",
        value: "cat_id"
      }
    };
  },
  components: {
    "tree-grid": TreeGrid
  },
  mounted() {
    this.initList();
  },
  methods: {
    initList() {
      getCategories(3).then(res => {
        console.log(res);
        this.dataSource = res.data;
      });
    },
    deleteCategory(cid) {
      console.log(cid);
    },
    editCategory(cid) {
      console.log(cid);
    },
    handleClose(done) {
      done();
    },
    handleChange(value) {
      console.log(value);
    },
    showAddDialog() {
      getCategories(2).then(res => {
        if (res.meta.status === 200) {
          console.log(res, "catelist");
          this.catelist = res.data;
        }
      });
    },
    addCategories() {
      if (this.selectedOptions.length === 0) {
        this.addform.cat_level = 0;
        this.addform.cat_pid = 0;
      } else if (this.selectedOptions.length === 1) {
        this.addform.cat_level = 1;
        this.addform.cat_pid = this.selectedOptions[0];
      } else if (this.selectedOptions.length === 2) {
        this.addform.cat_level = 2;
        this.addform.cat_pid = this.selectedOptions[1];
      }
      console.log(this.addform);
      addcate(this.addform).then(res => {
        if (res.meta.status === 201) {
          this.$message({
            message: res.meta.msg,
            type: "success"
          });
          this.initList();
          this.dialogVisible=false
        }
      });
    }
  }
};
</script>


<style scoped>
</style>
